import React, { useState } from 'react';
import { Dropdown, Menu } from 'antd';
import { logout } from '@/services/public';
import ResetPwdModal from '@/components/ResetPwdModal/ResetPwdModal';
import styles from './Avatar.less';
import people from './user.png';

const Avatar = (props) => {
  const { className = '', userInfo, ...otherProps } = props;
  const { id: userId, username } = userInfo;
  const handleLogOut = () => { logout(); };
  const [resetPwdVisible, setResetPwdVisible] = useState(false);

  const handleResetUserPwd = (record) => {
    setResetPwdVisible(true);
  };

  const handleCloseResetPwd = () => {
    setResetPwdVisible(false);
  };

  const menu = (
    <Menu theme="dark">
      {userId && <Menu.Item key="reset" onClick={handleResetUserPwd}>修改密码</Menu.Item>}
      <Menu.Item key="logout" onClick={handleLogOut}>退出登录</Menu.Item>
    </Menu>
  );

  return (
    <Dropdown overlay={menu}>
      <div className={`${styles.root} ${className}`} {...otherProps} title={username}>
        <img alt="people" src={people} />
        <span className={styles.username}>{username}</span>
        {resetPwdVisible && (
          <ResetPwdModal userData={{ userName: username, userId }} handleClose={handleCloseResetPwd} />
        )}
      </div>
    </Dropdown>
  );
};

export default Avatar;
